<template>
  <div class="school-course">
    <!-- 选择课程 -->
    <el-select
      v-model="value"
      collapse-tags
      @change="handleChange"
      placeholder="请选择课程"
      clearable
      filterable
      :disabled="disabled"
      style="width: 100%"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
        <span class="course-title">{{ item.name }}</span>
        <span class="training-title">{{
          item.hasOwnProperty('sysTrainingLevel')
            ? item.sysTrainingLevel.name
            : ''
        }}</span>
        <span
          class="course-icon el-icon-paperclip"
          title="本教研室课程"
          v-show="curTeacherOF && item.deptCode == curTeacherOF"
        ></span>
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { sysCourseSourceQuery } from '@/api/admin/course/sysCourseSource'
export default {
  data() {
    return {
      value: [],
      options: [],
      listQuery: {
        page: 1,
        limit: 999,
      },
      curTeacherOF: '', //当前教研室code
    }
  },
  props: ['defaultValue', 'disabled'],
  computed: mapGetters(['userId', 'userType', 'deptFullData']),
  watch: {
    defaultValue(v) {
      this.value = v
    },
  },
  mounted() {
    this.curTeacherOF = this.recursionTOF(this.deptFullData)
    this.value = this.defaultValue
    this.getList()
  },
  methods: {
    getList() {
      if (this.userType == 1) {
        delete this.listQuery.scope
      } else {
        let scope = this.deptFullData.childList[0].id
        Object.assign(this.listQuery, { scope })
      }
      sysCourseSourceQuery(this.listQuery).then((res) => {
        let { data } = res.data
        if (this.curTeacherOF) {
          let m = data.filter((v) => v.deptCode == this.curTeacherOF)
          let n = data.filter((v) => v.deptCode != this.curTeacherOF)
          this.options = [...m, ...n]
        } else {
          this.options = data
        }
      })
    },
    handleChange(value) {
      let v = this.options.filter((v) => v.id == value)[0]
      this.$emit('e-courseTitleData', v)
    },
    //递归当前教研室
    recursionTOF(data) {
      if (!data) return
      let arr = data.constructor === Array ? data : [data]
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].hasOwnProperty('type') && arr[i].type == 3) {
          return arr[i].code
        } else {
          return this.recursionTOF(arr[i].childList)
        }
      }
    },
  },
}
</script>
<style scoped>
.course-title {
  float: left;
}
.training-title {
  float: left;
  color: #8492a6;
  font-size: 12px;
  margin-left: 10px;
}
.course-icon {
  float: right;
  color: #8492a6;
  font-size: 13px;
  line-height: 34px;
}
</style>